<template>
	<view class="progress-box">
		<text>测评进度</text>
		<progress class="progress" :percent="process" border-radius="40" stroke-width="9" color="#cce3ff"
			activeColor="#2d8dfe" :active="true" active-mode="forwards" duration="15" />
		<text>{{ testIndex + 1 }}/{{ testLength }}</text>
	</view>
	<!-- 题目 -->
	<view class="question">{{ testNow.topic }}</view>
	<!-- 单选题 -->
	<view class="topic-view">
		<view class="topic-Title">
			<text></text>
			<text>单选题</text>
		</view>
		<view class="totic" hover-class="hover-style" hover-stay-time="300" @click="switchQuestion(item.son_id)"
			v-for="(item, index) in testNow.options" :key="item.son_id">
			{{ item.title }}
		</view>
	</view>
	<!-- 骨架屏 -->
	<!-- <skIndex v-if="skeLeton"></skIndex> -->
</template>
  
<script setup lang="ts">
// 1.引入基础模块
import { reactive, toRefs } from 'vue'
import { onShow, onLoad } from "@dcloudio/uni-app";
import { reqDepressionTopics, reqPrematureTopics, reqInsomniaTopics } from "@/serve/api"
import { testType } from "@/types/index"

// 2.定义页面响应式数据
let pageData = reactive({
	testData: [] as testType[],//所有的题目
	testNow: {} as testType,//当前页面展示的题目（问题和答案）
	testIndex: 0,//试题的默认下标
	testLength: 0,//试题总数量
	process: 0,//进度条大小
	ansId: [] as string[],//答案id数组（存储每道题）
	type:0//题目类型
})

// 3.批量解构响应式数据
let { testNow, testIndex, testLength, process } = toRefs(pageData)


// 4.获取试题数据
onLoad(async (option: any) => {
	// 获取需要请求的测试题的类型和标题
	let { type, title } = option
	// 存储题目类型后期查询答案使用
	pageData.type = type
	// 动态设置导航栏标题内容
	uni.setNavigationBarTitle({ title })
	// 根据题目的类型获取对应测试数据
	if (type == 1) {
		var res = await reqDepressionTopics()
	} else if (type == 2) {
		var res = await reqPrematureTopics()
	} else {
		var res = await reqInsomniaTopics()
	}

	console.log(res)
	pageData.testData = res.data//赋值全部的试题数据
	pageData.testNow = res.data[0]//赋值全部的试题数据
	pageData.testLength = res.data.length//赋值全部的试题数据
	pageData.process = (100 / res.data.length) * 1
})

// 5.切换题目
function switchQuestion(id: string) {
	++pageData.testIndex
	if (pageData.testIndex >= pageData.testLength) {
		--pageData.testIndex
		// 跳转到结果页面 (传递题目类型和案例id数组)
		console.log('结束了')
		uni.navigateTo({url:"./result?type="+pageData.type+"&ids="+JSON.stringify(pageData.ansId)})
	} else {
		// 正常切换题目  保存每道题答案
		pageData.ansId.push(id)//存储答案
		pageData.testNow = pageData.testData[pageData.testIndex]//获取下一道题目
		pageData.process = (100 / pageData.testLength) * (pageData.testIndex + 1)
	}


}
</script>
  
<style>
page {
	background: linear-gradient(to bottom, #d6e8ff 30%, #f2f7fb 55%, #f0f5f9 90%);
}

.progress-box {
	display: flex;
	align-items: center;
	padding: 20rpx;
}

.progress {
	flex: 1;
	padding: 0 40rpx;
}

.question {
	padding: 30rpx 20rpx;
	margin: 40rpx 20rpx;
	background-color: #ffffff;
	border-radius: 10rpx;
}

.topic-view {
	background-color: #f3f8ff;
	border-radius: 10rpx;
	padding: 20rpx;
	margin: 20rpx;
	box-shadow: #d6e8ff 0px 0px 23rpx 5rpx;
}

.topic-Title {
	display: flex;
	align-items: center;
}

.topic-Title text:nth-child(1) {
	width: 8rpx;
	height: 27rpx;
	background-color: #0d7cff;
	display: block;
	margin-right: 10rpx;
}

.totic {
	background: #ffffff;
	margin: 20rpx 0;
	padding: 40rpx 10rpx;
	border-radius: 10rpx;
}

.hover-style {
	background-color: #ebf4ff;
	color: #298cff;
}
</style>